<template>
  <el-container>
    <el-main>

      <!-- <div>
        <router-link tag="li" to="/shop/goodsList"  >商品分类列表</router-link>
        <router-link tag="li" to="/shop/goodsBanner"  >商城轮播图</router-link>
        <router-link tag="li" to="/shop/goods"  >商品列表</router-link>
        <router-link tag="li" to="/shop/chapter"  >章节管理</router-link>

      </div> -->


      <div>
        <el-row>
          <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left;margin : 10px 0px 15px 5px;">
            <el-radio-group v-model="param.state" @change="loadList">
              <el-radio :label="0">全部</el-radio>
              <el-radio :label="1">准备发货</el-radio>
              <el-radio :label="2">完成</el-radio>
              <el-radio :label="3">物流下单失败</el-radio>
              <el-radio :label="4">准备打印订单</el-radio>
              <el-radio :label="5">支付失败</el-radio>
            </el-radio-group>
          </div>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border
          stripe
          @selection-change="handleSelectionChange"
          size="mini"
          style="width: 100%">
          <el-table-column
            label="课程"
            width="180" >

            <template slot-scope="scope">

              <p v-for="(c,i) in scope.row.courses" v-text="c.name" :key="i"> </p>

            </template>


          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            width="100" >
          </el-table-column>

          <el-table-column
            label="手机号"
            width="150" >

            <template slot-scope="scope">

              <p v-text="scope.row.userAddress.mobile"> </p>

            </template>


          </el-table-column>
          <el-table-column
            label="用户"
            width="100" >

            <template slot-scope="scope">

              <p v-text="scope.row.userAddress.receiver"> </p>

            </template>

          </el-table-column>

          <el-table-column
            label="地址"
            width="180" >

            <template slot-scope="scope">

              <p v-text="scope.row.userAddress.city+' '+scope.row.userAddress.address"> </p>

            </template>


          </el-table-column>
          <el-table-column
            prop="scan_type"
            label="状态"
            width="100" >
          </el-table-column>
          <el-table-column
            prop="ctime"
            :formatter="dateFormat"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="more"
            label="更多">

            <template slot-scope="scope">
              <el-button   size="mini"
                          @click="handleEdit(scope.row)">编辑
              </el-button>
              <el-button v-if="scope.row.scan_type=='准备打印订单'"  size="mini"
                          @click="print(scope.row)">打印
              </el-button>

            </template>
          </el-table-column>
        </el-table>

        <div style="display: flex;justify-content: space-between;margin: 2px">
          <el-pagination
            background
            :page-size="15"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount">
          </el-pagination>
        </div>
      </div>

      <el-dialog
        :title="dialogTitle"
        style="padding: 0px;"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
      >
        <el-form :model="order" :rules="rules" ref="orderForm" style="margin: 0px;padding: 0px;">



          <el-form-item label="姓名:" prop="name">
            <el-input prefix-icon="el-icon-edit" v-model="order.name" size="mini"
                      placeholder="请输入姓名"></el-input>
          </el-form-item>


          <el-form-item label="电话号码:" prop="phone">
            <el-input prefix-icon="el-icon-phone" v-model="order.phone" size="mini"
                      placeholder="电话号码..."></el-input>
          </el-form-item>

          <el-form-item label="中通订单号:" prop="order_code">
            <el-input prefix-icon="el-icon-edit" v-model="order.order_code" size="mini"
                      placeholder="请输入中通订单号"></el-input>
          </el-form-item>

          <el-form-item label="中通运单号:" prop="bill_code">
            <el-input prefix-icon="el-icon-edit" v-model="order.bill_code" size="mini"
                      placeholder="请输入中通运单号"></el-input>
          </el-form-item>


          <el-form-item>
<!--            <el-button size="mini" @click="cancelEidt">取 消</el-button>-->
            <el-button size="mini" type="primary" @click="addOrder('orderForm')">确 定</el-button>
          </el-form-item>

        </el-form>
      </el-dialog>

      <!-- 从活动库导入 弹出框 -->
    </el-main>
  </el-container>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>

	export default {

		data() {
			return {
				param: {
					state : 0,
				},
				totalCount: -1,
				currentPage: 1,
				defaultProps: {
					children: 'children',
					label: 'label'
				},
		    dialogTitle:'',
		    dialogVisible: false,
				// 表格数据
				tableData: [],
				tableLoading:false,
				// 导入课程资源-选中课程数组
				multipleSelection:[],
        order: {
					id:'',
          name: '',
          phone: '',
          order_code:'',
          bill_code:''
        },
        rules: {
          name: [{required: true, message: '必填:姓名', trigger: 'blur'}],
          phone: [{required: true, message: '必填:电话号码', trigger: 'blur'}],
	        order_code: [{required: true, message: '必填:订单号', trigger: 'blur'}],
	        bill_code: [{required: true, message: '必填:运单号', trigger: 'blur'}],
        }

			};
		},
		mounted: function () {
			this.loadList();
		},
		methods: {
			//时间格式化
			dateFormat:function(row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			currentChange(currentChange){
				this.currentPage = currentChange;
				this.loadList();
			},

		  loadList(){
				var _this = this;
				this.tableLoading = true;
				this.postRequest("/shop/order/list?state="+_this.param.state+"&pageNo=" + this.currentPage + "&pageSize=15").then(resp=> {
					this.tableLoading = false;
					if (resp && resp.status == 200) {
						var data = resp.data;
						_this.tableData = data.data.arrays;

						_this.totalCount = data.data.count;
					}
				})
			},


		print(row){
			var _this = this;
			this.tableLoading = true;
			this.postRequest("/shop/order/doPrint?id="+row.id).then(resp=> {
				this.tableLoading = false;
				if (resp && resp.status == 200) {
					var data = resp.data;
			    _this.$message({type: data.status, message: data.msg});
				}
			})
		},


			handleEdit(row) {


		  this.dialogTitle = "编辑";
		  this.order.name = row.user.name;
		  this.order.id = row.id;
		  this.order.phone = row.user.phone;
		  this.order.bill_code = row.bill_code;
		  this.order.order_code = row.order_code;

		  this.dialogVisible = true;
			},
			/*
        mfp
        导入课程资源面板- 获取选择数据
       */
			handleSelectionChange(val){
				this.multipleSelection = val;
			},


		addOrder(formName){
			var _this = this;

			this.$refs[formName].validate((valid) => {
				if (valid) {
					if (_this.order.id) {
						//更新
						this.tableLoading = true;
						this.postRequest("/shop/order/update", _this.order).then(resp=> {
							_this.tableLoading = false;
							if (resp && resp.status == 200) {
								var data = resp.data;
								_this.$message({type: data.status, message: data.msg});
								_this.dialogVisible = false;
				        _this.loadList();
							}
						})
					}
				} else {
					return false;
				}
			});
		},

		}
	};

</script>
